<template>
    <div class="calendar ">
        <dropdown-menu class="commonsize">
            <dropdown-item v-model="value1" :options="option1" />
            <dropdown-item v-model="value2" :options="option2" />
            <dropdown-item v-model="value2" :options="option2" />
            <dropdown-item v-model="value2" :options="option2" />
        </dropdown-menu>
    </div>
</template>

<script>

import { DropdownMenu, DropdownItem } from 'vant';

export default {

    components: { DropdownMenu, DropdownItem },

    data() {
        return {
            value1: 0,
            value2: 'a',
            option1: [
                { text: '全部商品', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 },
            ],
            option2: [
                { text: '默认排序', value: 'a' },
                { text: '好评排序', value: 'b' },
                { text: '销量排序', value: 'c' },
            ],
        }
    },

    methods: {

    },
};
</script>

<style lang="scss" scoped>
.calendar {
    padding: 0 0 4px 0;
    /deep/ .van-dropdown-menu__bar {
        height: 40px;
    }
    /deep/ .van-dropdown-menu__title {
        font-size: 14px;
    }
}
</style>